<template>
  <div class="page-container">
    <SearchPanel @change="handleSearchPanelChange">
      <el-form
        ref="queryForm"
        class="query-more-form"
        size="mini"
        label-width="100px"
        :model="query"
      >
        <el-row :gutter="21">
          <el-col :span="8">
            <el-form-item label="部门名称">
              <el-input
                v-model="query.deptName"
                class="search-ipt"
                placeholder="请输入部门名称"
                maxlength="255"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间">
              <el-date-picker
                v-model="TimeData"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="快捷查询">
              <el-select
                class="w-100"
                v-model="query.quick"
                placeholder="请选择"
                clearable
                filterable
                @change="changeQuick"
              >
                <el-option
                  v-for="item in quickArr"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="3" class="btn-col">
            <el-button size="mini" class="search-btn" @click="queryData"
              >查询</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </SearchPanel>
    <div class="table-container">
      <div class="table-tools-panel table-flex-row">
        <div>
          <el-button
            class="flush-btn"
            size="mini"
            icon="el-icon-refresh"
            @click="refresh"
            >刷新</el-button
          >
          <el-button
            :type="query.deptLevel == 11 ? 'warning' : ''"
            size="medium"
            @click="changeTable(11)"
            >职能部门</el-button
          >
          <el-button
            :type="query.deptLevel == 12 ? 'warning' : ''"
            size="medium"
            @click="changeTable(12)"
            >镇街分中心</el-button
          >
        </div>
        <div>
          <el-button
            class="tools-btn"
            size="mini"
            icon="el-icon-set-up"
          ></el-button>
          <el-button
            class="tools-btn"
            size="mini"
            icon="el-icon-share"
          ></el-button>
          <el-button
            class="tools-btn"
            size="mini"
            icon="el-icon-printer"
          ></el-button>
        </div>
      </div>
      <div class="table-list-panel">
        <el-table
          v-loading="tableLoading"
          border
          size="small"
          :data="tableData"
          :height="isShow ? 'calc(100vh - 410px)' : 'calc(100vh - 335px)'"
          style="width: 100%"
        >
          <el-table-column type="selection" width="45" />
          <el-table-column
            prop="name"
            label="单位名称"
            show-overflow-tooltip
          />
          <el-table-column prop="sls" label="受理数" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row, 0)"
                >{{ scope.row.sls }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="bls" label="办理数" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row, 1)"
                >{{ scope.row.bls }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="aqbls"
            label="按时办理数"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row, 2)"
                >{{ scope.row.aqbls }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="cqbls"
            label="超期办理数"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row, 3)"
                >{{ scope.row.cqbls }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="cqwbl"
            label="超期未办理数"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row, 4)"
                >{{ scope.row.cqwbl }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="blv" label="办理率" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row, 1)"
                >{{ scope.row.blv }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="aqblv"
            label="按期办理率"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row, 2)"
                >{{ scope.row.aqblv }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="cqblv"
            label="超期办理率"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row, 3)"
                >{{ scope.row.cqblv }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-panel">
        <Pagination
          :total="query.total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          @pagination="initData"
        />
      </div>
    </div>

    <ReportDialog
      :dialogVisible="ReportDialogDialog"
      :taskId="taskId"
      @closeDialog="ReportDialogDialog = false"
    />
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import ReportDialog from "./components/ReportDialog";
import {
  deptEfficiency,
  deptEfficiencyDetailed
} from "@/api/system/doubleRandomMatters";

export default {
  name: "InspectionPersonnel",
  components: {
    SearchPanel,
    Pagination,
    ReportDialog
  },
  data() {
    return {
      query: {
        total: 1,
        pageNum: 1,
        pageSize: 10,
        deptLevel: 11
      },
      tableLoading: false,
      ReportDialogDialog: false,
      tableData: [],
      department: [],
      isShow: true,
      TimeData: "",
      taskId: {},
      // 时间选择框的快捷选项
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      quickArr: [
        {
          name: "本周",
          id: 2
        },
        {
          name: "本月",
          id: 3
        },
        {
          name: "本季度",
          id: 4
        },
        {
          name: "本年",
          id: 5
        }
      ]
    };
  },
  created() {
    this.initData();
  },
  methods: {
    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },
    initData() {
      this.select();
    },
    // 查询按钮
    queryData() {
      if (Array.isArray(this.TimeData)) {
        this.query.beginTime = this.TimeData[0];
        this.query.endTime = this.TimeData[1];
      }
      this.select();
    },
    // 快捷选项
    changeQuick(val) {
      var params;
      // var date = new Date();
      var now = new Date(); //当前日期
      var nowDayOfWeek = now.getDay(); //今天本周的第几天
      var nowDay = now.getDate(); //当前日
      var nowMonth = now.getMonth(); //当前月
      var nowYear = now.getYear(); //当前年
      nowYear += nowYear < 2000 ? 1900 : 0; //
      var lastMonthDate = new Date(); //上月日期
      lastMonthDate.setDate(1);
      lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
      var lastYear = lastMonthDate.getYear();
      var lastMonth = lastMonthDate.getMonth();
      //格式化日期：yyyy-MM-dd
      function formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();
        if (mymonth < 10) {
          mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
          myweekday = "0" + myweekday;
        }
        return myyear + "-" + mymonth + "-" + myweekday;
      }
      function getMonthDays(myMonth) {
        var monthStartDate = new Date(nowYear, myMonth, 1);
        var monthEndDate = new Date(nowYear, myMonth + 1, 1);
        var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
        return days;
      }
      //获得本季度的开始月份
      function getQuarterStartMonth() {
        var quarterStartMonth = 0;
        if (nowMonth < 3) {
          quarterStartMonth = 0;
        }
        if (2 < nowMonth && nowMonth < 6) {
          quarterStartMonth = 3;
        }
        if (5 < nowMonth && nowMonth < 9) {
          quarterStartMonth = 6;
        }
        if (nowMonth > 8) {
          quarterStartMonth = 9;
        }
        return quarterStartMonth;
      }

      function getDay(day) {
        var today = new Date();
        var targetday_milliseconds =
          today.getTime() + 1000 * 60 * 60 * 24 * day;
        today.setTime(targetday_milliseconds); //注意，这行是关键代码
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = doHandleMonth(tMonth + 1);
        tDate = doHandleMonth(tDate);
        return tYear + "-" + tMonth + "-" + tDate;
      }

      function doHandleMonth(month) {
        var m = month;
        if (month.toString().length == 1) {
          m = "0" + month;
        }
        return m;
      }
      // var flag = parseInt(params);
      switch (val) {
        case 1:
          // 今日
          var startStr = now.format("yyyy-MM-dd 00:00:00");
          var endStr = now.format("yyyy-MM-dd 23:59:59");
          params = {
            startDate: startStr,
            endDate: endStr
          };
          break;
        case 2:
          // 本周
          // var weekStartDate = new Date(
          //   nowYear,
          //   nowMonth,
          //   nowDay - nowDayOfWeek
          // );
          // var start = formatDate(weekStartDate);
          // var weekEndDate = new Date(
          //   nowYear,
          //   nowMonth,
          //   nowDay + (6 - nowDayOfWeek)
          // );
          // var end = formatDate(weekEndDate);
          var start = getDay(-6);
          var end = getDay(0);
          params = {
            startDate: start + " " + "00:00:00",
            endDate: end + " " + "23:59:59"
          };
          break;
        case 3:
          // 本月
          var monthStartDate = new Date(nowYear, nowMonth, 1);
          var start = formatDate(monthStartDate);
          var monthEndDate = new Date(
            nowYear,
            nowMonth,
            getMonthDays(nowMonth)
          );
          var end = formatDate(monthEndDate);
          params = {
            startDate: start + " " + "00:00:00",
            endDate: end + " " + "23:59:59"
          };
          break;
        case 4:
          // 本季度
          var quarterStartDate = new Date(nowYear, getQuarterStartMonth(), 1);
          var start = formatDate(quarterStartDate);
          var quarterEndMonth = getQuarterStartMonth() + 2;
          var quarterStartDate = new Date(
            nowYear,
            quarterEndMonth,
            getMonthDays(quarterEndMonth)
          );
          var end = formatDate(quarterStartDate);
          params = {
            startDate: start + " " + "00:00:00",
            endDate: end + " " + "23:59:59"
          };
          break;
        case 5:
          // 本年
          var start = now.format("yyyy-01-01 00:00:00");
          var end = now.format("yyyy-12-31 23:59:59");
          params = {
            startDate: start,
            endDate: end
          };
          break;
      }
      this.TimeData = [params.startDate, params.endDate];
      // return params;
    },
    // 详情
    handleDetail(val, num) {
      this.taskId = {
        deptId: val.id,
        flag: num,
        type:'bumen'
      };
      this.ReportDialogDialog = true;
    },
    changeTable(val) {
      this.query.deptLevel = val;
      this.select();
    },
    select() {
      this.tableLoading = true;
      const query = JSON.parse(JSON.stringify(this.query));
      deptEfficiency(query)
        .then(res => {
          this.tableData = res.rows;
          this.query.total = res.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 刷新
    refresh() {
      this.clearData();
      this.select();
    },
    clearData() {
      this.query = {
        total: 1,
        pageNum: 1,
        pageSize: 10,
        name: ""
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.table-inner-btn {
  color: #606266;
}
</style>
